import { useEffect, useState } from 'react';
import style from './index.module.scss';
import title0 from '@/assets/images/week-star/title-last-week-star.png';
import title1 from '@/assets/images/week-star/title-week-rank.png';
import title2 from '@/assets/images/week-star/title-history-star.png';
import star from '@/assets/images/week-star/star.png';
import clock from '@/assets/images/week-star/clock.png';
import empty from '@/assets/images/week-star/empty.png';
import heart from '@/assets/images/week-star/heart.png';
import man from '@/assets/images/week-star/man.png';
import woman from '@/assets/images/week-star/woman.png';

import Icon1 from '@/assets/images/week-star/1.png';
import Icon2 from '@/assets/images/week-star/2.png';
import Icon3 from '@/assets/images/week-star/3.png';

import CountdownToNextMonday from './countdown';

console.log(process.env.REACT_APP_ENV);
const BaseUrl =
    process.env.REACT_APP_ENV === 'prod'
        ? 'https://webapi.pupupal.com'
        : 'https://kk-test-webapi.sayhaiapp.com';
const Content = ({ type }) => {
    const urlParams = new URLSearchParams(window.location.search);
    const authorizationToken = urlParams.get('userId');
    console.log('authorizationToken', authorizationToken);

    // 1甜蜜来袭 2爱情告白
    const [topThree, setTopThree] = useState([]);
    const [topOne, setTopOne] = useState({});
    const [data, setData] = useState([]);
    const [info, setInfo] = useState(); // 当前用户信息

    const getSweetRank = async () => {
        fetch(`${BaseUrl}/gift/rank/week/star/charm/rank`, {
            method: 'GET',
            headers: {
                Authorization: authorizationToken,
            },
        })
            .then((response) => response.json())
            .then((response) => {
                if (response.code === 200 && response.data) {
                    setTopThree(response.data.lastWeekStarRank || []);
                    setData(response.data.weekStarRank || []);
                    setInfo(response.data.myRank);
                } else {
                    console.error('Failed to fetch ranking data:');
                }
            })
            .catch((error) =>
                console.error('Error fetching ranking data:', error)
            );
    };

    const getLikeRank = async () => {
        fetch(`${BaseUrl}/gift/rank/old/week/star/charm/first/rank`, {
            method: 'GET',
            headers: {
                Authorization: authorizationToken,
            },
        })
            .then((response) => response.json())
            .then((response) => {
                if (response.code === 200 && response.data) {
                    setData(response.data || []);
                    setTopOne(response.data[0] || {});
                } else {
                    console.error(
                        'Failed to fetch ranking data:',
                        response.msg
                    );
                }
            })
            .catch((error) =>
                console.error('Error fetching ranking data:', error)
            );
    };

    useEffect(() => {
        if (authorizationToken) {
            if (type === 1) {
                getSweetRank();
            } else {
                getLikeRank();
            }
        } else {
            console.error('Authorization token not found in URL');
        }
    }, []);

    return (
        <>
            <div className={style.content_wrap}>
                {/* 活动介绍 */}
                <div className={style.gift}>
                    <img className={style.flower_left} src={star} alt="" />
                    <div className={style.title_box}>
                        <img src={title0} alt="" />
                    </div>
                    {type == 1 && (
                        <div className={style.content}>
                            <div className={`${style.top} ${style.top1}`}>
                                <p className={style.title}>TOP1</p>
                                <div className={style.box}>
                                    <div className={style.pendant}></div>
                                    <div className={style.boxAvatar}>
                                        {topThree[0] ? (
                                            <img
                                                className={style.avatar1}
                                                src={topThree[0]?.avatar}
                                            />
                                        ) : (
                                            <span>虚位以待</span>
                                        )}
                                    </div>
                                </div>
                                {topThree[0] && (
                                    <p className={style.name}>
                                        {topThree[0]?.nickname}
                                    </p>
                                )}
                                {topThree[0] && (
                                    <p className={style.desc}>
                                        <img src={heart}></img>
                                        {topThree[0]?.showValue}
                                    </p>
                                )}
                            </div>
                            <div className={`${style.top} ${style.top2}`}>
                                <p className={style.title}>TOP2</p>
                                <div className={style.box}>
                                    <div className={style.pendant}></div>
                                    <div className={style.boxAvatar}>
                                        {topThree[1] ? (
                                            <img
                                                className={style.avatar1}
                                                src={topThree[1]?.avatar}
                                            />
                                        ) : (
                                            <span>虚位以待</span>
                                        )}
                                    </div>
                                </div>
                                {topThree[1] && (
                                    <p className={style.name}>
                                        {topThree[1]?.nickname}
                                    </p>
                                )}
                                {topThree[1] && (
                                    <p className={style.desc}>
                                        <img src={heart}></img>
                                        {topThree[1]?.showValue}
                                    </p>
                                )}
                            </div>
                            <div className={`${style.top} ${style.top3}`}>
                                <p className={style.title}>TOP3</p>
                                <div className={style.box}>
                                    <div className={style.pendant}></div>
                                    <div className={style.boxAvatar}>
                                        {topThree[2] ? (
                                            <img
                                                className={style.avatar1}
                                                src={topThree[2]?.avatar}
                                            />
                                        ) : (
                                            <span>虚位以待</span>
                                        )}
                                    </div>
                                </div>
                                {topThree[2] && (
                                    <p className={style.name}>
                                        {topThree[2]?.nickname}
                                    </p>
                                )}
                                {topThree[2] && (
                                    <p className={style.desc}>
                                        <img src={heart}></img>
                                        {topThree[2]?.showValue}
                                    </p>
                                )}
                            </div>
                        </div>
                    )}
                    {type == 2 && (
                        <div className={style.content}>
                            <div className={`${style.top} ${style.top0}`}>
                                <p className={style.title}>TOP1</p>
                                <div className={style.box}>
                                    <div className={style.boxAvatar}>
                                        {topOne ? (
                                            <img
                                                className={style.avatar1}
                                                src={topOne.avatar}
                                            />
                                        ) : (
                                            <span>虚位以待</span>
                                        )}
                                    </div>
                                    <div className={style.pendant}></div>
                                </div>
                                <p className={style.name}>{topOne.nickname}</p>
                                <p className={style.desc}>
                                    已成功守擂{topOne.times || '-'}周
                                </p>
                            </div>
                        </div>
                    )}
                </div>
                {/* 排行榜 */}
                <div className={style.rank_container}>
                    <img className={style.clock} src={clock} alt="" />
                    <div className={style.title_box}>
                        <img src={type === 1 ? title1 : title2} alt="" />
                    </div>
                    {type == 1 && <CountdownToNextMonday />}
                    <div className={style.rank_box}>
                        <div className={style.rank_list}>
                            {data?.length > 0 &&
                                data.map((item, i) => (
                                    <div
                                        className={style.td_box}
                                        key={item?.userId}
                                    >
                                        {type === 1 && (
                                            <div>
                                                {i === 0 && (
                                                    <div className={style.rank}>
                                                        <img src={Icon1}></img>
                                                    </div>
                                                )}
                                                {i === 1 && (
                                                    <div className={style.rank}>
                                                        <img src={Icon2}></img>
                                                    </div>
                                                )}
                                                {i === 2 && (
                                                    <div className={style.rank}>
                                                        <img src={Icon3}></img>
                                                    </div>
                                                )}
                                                {i > 2 && (
                                                    <div className={style.rank}>
                                                        {i >= 99
                                                            ? '99+'
                                                            : i + 1}
                                                    </div>
                                                )}
                                            </div>
                                        )}
                                        {type === 2 && (
                                            <div className={style.rank2}>
                                                {item.stage}
                                            </div>
                                        )}
                                        <div className={style.user}>
                                            <img
                                                src={item?.avatar}
                                                alt=""
                                                // onClick={() =>
                                                //     goUserPage(item.userId)
                                                // }
                                            />
                                            <div>
                                                <div className={style.nickname}>
                                                    {item.nickname ||
                                                        item.account}
                                                </div>
                                                <div className={style.score}>
                                                    <div
                                                        className={`${
                                                            style.gender
                                                        } ${
                                                            item?.gender == 1
                                                                ? style.genderM
                                                                : style.genderW
                                                        }`}
                                                    >
                                                        {item?.gender == 1 && (
                                                            <img
                                                                src={man}
                                                                alt=""
                                                            />
                                                        )}
                                                        {item?.gender == 0 && (
                                                            <img
                                                                src={woman}
                                                                alt=""
                                                            />
                                                        )}
                                                        {item?.age || ''}
                                                    </div>
                                                    <div
                                                        className={style.level}
                                                    >
                                                        <img
                                                            src={item?.levelImg}
                                                            alt=""
                                                        />
                                                        {/* Lv.{item?.level} */}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className={style.rankRightBtn}>
                                            {/* <p>距离上一名</p> */}
                                            <p className={style.desc}>
                                                <img src={heart}></img>
                                                {item.showValue}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            {data?.length <= 0 && (
                                <div className={style.emptyBox}>
                                    <img src={empty} alt="" />
                                    <p>暂无{type == 1 ? '榜单' : '周星'}</p>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
            {/* 个人 */}
            {type === 1 && (
                <div className={`${style.user_box}`}>
                    <div className={style.user_content}>
                        <div className={style.left}>
                            <div className={style.my_rank_index}>
                                {info?.rank === 0 ? '未上榜' : info?.rank}
                            </div>
                        </div>
                        <div className={style.user}>
                            <img src={info?.avatar} alt="" />
                            <div>
                                <div className={style.nickname}>
                                    {info?.nickname || info?.account}
                                </div>
                                <div className={style.score}>
                                    <div
                                        className={`${style.gender} ${
                                            info?.gender == 1
                                                ? style.genderM
                                                : style.genderW
                                        }`}
                                    >
                                        {info?.gender == 1 && (
                                            <img src={man} alt="" />
                                        )}
                                        {info?.gender == 0 && (
                                            <img src={woman} alt="" />
                                        )}
                                        {info?.age || ''}
                                    </div>
                                    <div className={style.level}>
                                        <img src={info?.levelImg} alt="" />
                                        {/* Lv.{info?.level} */}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className={style.right}>
                            {/* <p>距离上一名</p> */}
                            <p className={style.desc}>
                                <img src={heart}></img>
                                {info?.showValue}
                            </p>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default Content;
